import React, { memo, useCallback } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import {
  SongWrapper
} from './style'
import {
  PlayCircleOutlined,
  PlusCircleOutlined
} from '@ant-design/icons'
import usePlayMusic from '@/hooks/usePlayMusic'
export default memo(function SimiSong() {
  const { simiSongs } = useSelector(state => ({
    simiSongs:state.getIn(['song','simiSongs'])
  }), shallowEqual)
  const playMusic = usePlayMusic()
  const playMusic1 = useCallback(playMusic, [playMusic])
  
  return (
    <SongWrapper>
      <div className="header">相似歌曲</div>
      <div className="list">
        {
          simiSongs.map(item => {
            return (
              <div className="item" key={item.id}>
                <div className="left">
                  <div className="name">{ item.name }</div>
                  <div className="artist">{ item.artists[0].name }</div>
                </div>
                <div className="right">
                  <PlayCircleOutlined className='play' onClick={e => playMusic1(item.id)}/>
                  <PlusCircleOutlined className='plus'/>
                </div>
              </div>
            )
          })
        }
      </div>
    </SongWrapper>
  )
})
